<%-- 
    Document   : meerijden
    Created on : 5-mei-2012, 18:68:00
    Author     : Niels Leguit <niels.leguit at hva.nl>
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Project Digital Learning</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <link href="css/default.css" rel="stylesheet" type="text/css" title="Style" /> 

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            var myPoints=new Array();

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();  
                var nederland = new google.maps.LatLng(52.153714, 5.194287);
                var myOptions = {
                    zoom:7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: nederland
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                directionsDisplay.setMap(map);
                calcRoute();
            }
  
            function calcRoute() {
                var start = "${googleVan}"; 
                var end = "${googleNaar}";
                var request = {
                    origin:start, 
                    destination:end,
   
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        getAllSteps(response);
                    }
      
                });
            }
            
            function getAllSteps(directionResult){
                //document.write(directionResult.routes[0].overview_path[0].toString()); //ipv string kan ook lat() of lng()

                //var msg = "";
                for(var x = 0 ; x < directionResult.routes[0].overview_path.length ; x++) {
                    myPoints[x] = directionResult.routes[0].overview_path[x].toString();
                    //    msg = msg + directionResult.routes[0].overview_path[x].toString()+ "\n"; 
                }
                //msg = msg + "eind";
                //alert(msg);
            }
            
        </script>
    </head>

    <body> <!--verander dit in <body onload="initialize()"> en maps wordt getoond-->

        <jsp:include page="include/top_nav.jsp" /> 

        <div id="header">
            <h1>Dryves</h1>
            <h2></h2>
               
            <!-- hier stond de maps...
            <h2><div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden; top: -172px; right: -60px;"></div></h2>-->
        </div>

        <div id="wrapper">
            <div id="content">
                <div id="posts">
                    <div class="post">
                        <h2 class="title">De route</h2>
                        <div class="story" id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden; top: 0px; right: -20px;">
                           
                            <script>initialize();</script><!--  hier moet googlemaps komen!!!  -->


                        </div>
                    </div>
                </div>

                <div id="links">
                    <ul>
                        <jsp:include page="elements/links/advertentie.jsp" />
                        <jsp:include page="elements/links/meerijdenlinks.jsp" />
                    </ul>    
                </div>

                <div style="clear: both;">&nbsp;</div>
            </div>
        </div>

        <jsp:include page="include/footer.jsp" />

    </body>
</html>